<template>
	<view class="container">
		<!-- <view class="index-top">
			<view :style="{'height': 0 + 'px'}"></view>
			<view class="f-center top-title"></view>
		</view>
		<view :style="{'height': 0 + 'px'}" style="padding-top: 88rpx;width: 750rpx;box-sizing: content-box;"></view> -->
		<view class="kind-title">服务价目表</view>
		<view class="line-title f-center">点击图片了解洗护流程</view>
		<!-- v-if="isfetch" -->
		<view style="padding: 0 32rpx 20rpx 0rpx;">
			<view class="category">
				<view :class="current === -1 ? 'item select' : 'item'" @click="goodsTypeChange(-1)">全部</view>
				<view v-for="(item, index) in goodsTypeList" :key="index">
					<view :class="current === index ? 'item select' : 'item'" @click="goodsTypeChange(index)">{{item.goodsType}}</view>
				</view>
			</view>
			<view v-if="goodsList.length > 0" style="width: calc(100% - 100px);float: left;">
				<view class="flex f-justifyB wrap">
					<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="$api.toPage('../pages/productDetail?id=' + item.id, 1, this)">
						<view style="width: 270rpx;" class="text-overflow font26 f-center gray333">{{item.goodsName}}</view>
						<image :src="item.goodsUrl" class="item-img"></image>
						<view class="flex f-align f-justifyB w100">
							<view class="font40 gray333"><text class="font26 blue">￥</text>{{item.goodsMoney}}</view>
							<view @click.stop="selectHandle(item)" class="f-center" style="width: 46rpx;height: 46rpx;justify-content: flex-end;">
								<image src="../static/img/fenleijiahao@2x.png" style="width: 33rpx;height: 33rpx;"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex f-column f-align" v-else>
				<text class="font36 gray999 bold mt50">暂无洗护套餐</text>
			</view>
		</view>

		<uni-popup ref="uniPopup" type="bottom">
			<view class="service-box flex f-column">
				<image src="../static/img/close-blue.png" class="close-btn" @click="closePopup()"></image>
				<text class="font36" style="align-self: center;">增值服务</text>
				<view class="mt30 img-box flex f-align">
					<view class="inner-box">
						<image :src="goods_img" mode=""></image>
					</view>
				</view>
				<text class="font28 gray333 mt40">必选项目</text>
				<view class="flex wrap">
					<view class="f-item active">清洗</view>
				</view>
				<text class="font28 gray333" style="margin-top: 70rpx;">增值服务</text>
				<text class="font22 gray999">(因修复价格不等，收到衣物后将根据项目进行划价，取衣时需支付额外费用，请您提前咨询客服了解修复价格，以免造成不便)</text>
				<view class="flex wrap">
					<view @click="selectProject(item)" class="f-item" :class="{'active': item.check}" v-for="(item,index) in itemList" :key="index">{{item.projectName}}</view>
				</view>
				<view class="font32 white join-btn f-center" @click="addCart">加入购物车</view>
			</view>
		</uni-popup>

		<!-- 授权登录 -->
		<auth ref="auth"></auth>
	</view>
</template>

<script>
	import auth from '../components/auth.vue'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight,
				itemList: [],
				page: 1,
				loadStatus: 'more',
				isfetch: false,
				goodsList: [],

				goods_id: '',
				goods_img: '',
				current: -1,
				goodsTypeList: ['已预约', '服务中', '待取件', '交易完成']
			}
		},
		components: {
			auth
		},
		onLoad(options) {
			 //二维码跳转传值获取数据
						let that = this
						console.log("新分类")
						console.log(options.ddd)
							uni.setStorageSync("lijiyuyue","2");
			
		},
		onShow() {
		
			this.page = 1
			this.loadStatus = 'more'
			this.getGoodsType()
			this.getKindList()
			this.getGoodsList()
			if (this.hasLogin) {
				this.getCartList()
			}
		},
		onHide() {
			this.$refs.auth.close()
		},
		onPullDownRefresh() {
			this.page = 1
			this.loadStatus = 'more'
			this.getGoodsList()
			this.getKindList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		computed: {
			...mapState(['hasLogin']),
		},
		methods: {
			getCartList() {
				this.$http.ajax({
					url: '/ShoppingTrolley/list',
					params: {
						openId: uni.getStorageSync('openId')
					}
				}).then((res) => {
					if (res.code == 0 && res.count > 0) {
						let cartNum = res.data.reduce((a, b) => {
							return a + b.goodsNumber
						}, 0)
						uni.setStorageSync('cartNum', cartNum)
						uni.setTabBarBadge({
							index: 2,
							text: JSON.stringify(cartNum)
						})
					}
				})
			},
			addCart() {
				this.$clickHandle.notClickMore({
					key: 'addCart',
					time: 2000,
					success: () => {
						let arr = []
						this.itemList.forEach(item => {
							if (item.check) {
								arr.push(item.id)
							}
						})
						this.$http.ajax({
							url: '/ShoppingTrolley/add',
							params: {
								'goodsId': this.goods_id,
								'projectId': arr.join(','),
								'goodsNumber': 1,
								'openId': uni.getStorageSync('openId')
							},
							isOP: 0
						}).then((res) => {
							if (res.code == 200) {
								uni.getStorage({
									key: 'cartNum',
									success: (res) => {
										uni.setStorageSync('cartNum', res.data + 1)
										uni.setTabBarBadge({
											index: 2,
											text: JSON.stringify(res.data + 1)
										})
									}
								})
								this.$api.msg('加入购物车成功')
								this.closePopup()
							} else {
								this.$api.msg(res.msg)
							}
						})
					}
				})
			},
			closePopup() {
				this.goods_id = ''
				this.itemList.forEach(item => item.check = false)
				this.$refs.uniPopup.close()
			},
			selectHandle(item) {
				if (!this.hasLogin) {
					this.$refs.auth.open()
					return
				}
				
				this.goods_img = item.goodsUrl
				this.goods_id = item.id
				this.$refs.uniPopup.open()
			},
			selectProject(item) {
				item.check = !item.check
				this.$forceUpdate()
			},
			getKindList() {
				this.$http.ajax({
					url: '/Project/list',
					params: {
						page: 1,
						limit: 99,
						appId: uni.getAccountInfoSync().miniProgram.appId,
						type: 1
					},
					isOP: 0
				}).then((res) => {
					if (res.code == 200) {
						res.data.forEach(item => item.check = false)
						this.itemList = res.data
					}
				})
			},
			getGoodsList(goodsTypeId) {
				const params = {
					page: this.page,
					limit: 999,
					appId: uni.getAccountInfoSync().miniProgram.appId,
					type: 1
				}
				if(goodsTypeId){
					params.goodsTypeId = goodsTypeId
				}
				this.$http.ajax({
					url: '/Goods/list',
					params: params
				}).then((res) => {
					this.isfetch = true
					if (res.code == 0) {
						this.goodsList = res.data
					} else {
						this.goodsList = []
						this.$api.msg(res.msg)
					}
				})
			},
			goodsTypeChange(index){
				this.current = index
				if(this.current === -1){
					this.getGoodsList()
				}else{
					console.log('this.current', this.current)
					const checked = this.goodsTypeList[this.current]
					console.log('checked', checked)
					if(checked){
						this.getGoodsList(checked.id)
					}
				}
			},
			getGoodsType() {
				this.$http.ajax({
					url: '/GoodsType/list',
					params: {
						page: 1,
						limit: 9999,
						appId: uni.getAccountInfoSync().miniProgram.appId
					},
					isOP: 0
				}).then((res) => {
					if (res.code == 200) {
						console.log('res', res)
						if(res.data){
							this.goodsTypeList = res.data
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.category{
		width: 100px;
		text-align: center;
		display: inline-block;
		float: left;
		.item{
			padding: 10rpx 0;
			margin: 15rpx 32rpx;
			font-size: 30rpx;
		}
		.select{
			font-size: 35rpx;
			border-bottom-style: solid;
			border-bottom-width: 2px;
			border-bottom-color: #7874D9;
		}
	}
	.index-top {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-color: #4082FF;

		.top-title {
			height: 88rpx;
			padding: 0 20rpx;
		}
	}

	.service-box {
		width: 750rpx;
		background: #ffffff;
		padding: 40rpx 32rpx;
		border-radius: 60rpx 60rpx 0 0;
		position: relative;

		.img-box {
			width: 686rpx;
			height: 264rpx;
			border-radius: 12rpx;
			background-image: url('https://xx.img.dz888.shop/wx1.jpg');
			background-size: 100% 100%;
			padding-left: 50rpx;
			
			.inner-box {
				width: 170rpx;
				height: 170rpx;
				background: #3D99FE;
				border: 1rpx solid #FFFFFF;
				box-shadow: 2rpx 4rpx 11rpx 0rpx rgba(20,65,143,0.45);
				border-radius: 14rpx;
				
				image {
					width: 100%;
					height: 100%;
					border-radius: 14rpx;
				}
			}
		}

		.f-item {
			width: 130rpx;
			height: 60rpx;
			background: #EBEBEB;
			border-radius: 8rpx;
			font-size: 24rpx;
			line-height: 60rpx;
			color: #777777;
			text-align: center;
			margin-right: 55rpx;
			margin-top: 20rpx;

			&:nth-child(4n) {
				margin-right: 0;
			}
		}

		.active {
			background: #4082FF;
			color: #FFFFFF;
		}

		.join-btn {
			width: 686rpx;
			height: 72rpx;
			background: #4082FF;
			border-radius: 38rpx;
			box-shadow: 0rpx -6rpx 12rpx rgba(24, 70, 157, 0.1);
			margin-top: 100rpx;
		}

		.close-btn {
			width: 59rpx;
			height: 59rpx;
			position: absolute;
			right: 28rpx;
			top: 28rpx;
			z-index: 99;
		}
	}


	.goods-item {
		width: 250rpx;
		background: rgba(255, 255, 255, 0.39);
		box-shadow: 0rpx 8rpx 12rpx rgba(24, 70, 157, 0.53);
		border-radius: 8rpx;
		margin-top: 20rpx;
		position: relative;
		padding: 25rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.item-img {
			width: 200rpx;
			height: 200rpx;
			margin: 10rpx 0;
		}

		.item-title {
			width: 210rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
			line-height: 82rpx;
			padding-left: 20rpx;
		}

		.no-goods {
			position: absolute;
			left: 0;
			top: 0;
			width: 210rpx;
			height: 262rpx;
			background: rgba(0, 0, 0, 0.20);
			border-radius: 10rpx;
			z-index: 10;
		}

		.select-goods {
			position: absolute;
			left: 0;
			top: 0;
			width: 210rpx;
			height: 262rpx;
			background: rgba(48, 99, 217, 0.30);
			border: 2rpx solid #3063d9;
			border-radius: 10rpx;
			z-index: 10;
		}
	}

	.container {
		padding: 0;

		.kind-title {
			width: 750rpx;
			height: 80rpx;
			background: rgba(236, 234, 234, 1);
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			line-height: 80rpx;
			color: #000000;
			text-align: center;
		}

		.line-title {
			font-size: 24rpx;
			line-height: 44rpx;
			color: #777777;
			position: relative;
		}

		.line-title::before {
			position: absolute;
			width: 200rpx;
			height: 2rpx;
			background-color: #AAAAAA;
			content: '';
			left: 32rpx;
			top: 21rpx;
		}

		.line-title::after {
			position: absolute;
			width: 200rpx;
			height: 2rpx;
			background-color: #AAAAAA;
			content: '';
			right: 32rpx;
			top: 21rpx;
		}

		::v-deep .uni-popup__wrapper-box {
			padding-bottom: 0;
		}
	}
</style>
